<template>
  <transition name="vue-flow-editor-preview-transition">
    <div class="vue-flow-editor-preview" v-if="p_value">
      <div class="vue-flow-editor-preview-body" ref="body">
        <div class="vue-flow-editor-preview-target" ref="target"></div>
        <div class="vue-flow-editor-preview-close" @click="close">
          <i class="el-icon-close" />
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { G6 } from "@/g6/g6";
import { GraphStyle } from "../utils/styles";

export default {
  name: "vue-flow-editor-preview",
  props: {
    value: { type: Boolean },
    data: { type: Object },
  },
  watch: {
    value(val) {
      this.p_value = val;
      if (!!val) {
        this.$nextTick(() => {
          this.refresh();
        });
      }
    },
  },
  data() {
    return {
      graph: null,
      p_value: this.value,
    };
  },
  methods: {
    refresh() {
      const container = this.$refs.target;
      const { offsetHeight, offsetWidth } = this.$refs.body;

      if (!!this.graph) {
        this.graph.destroy();
      }
      this.graph = new G6.Graph({
        container,
        width: offsetWidth,
        height: offsetHeight,

        ...GraphStyle.default,
        mode: {
          default: ["drag-canvas", "zoom-canvas"],
        },
      });

      this.graph.read(this.data);
      this.graph.fitView(20);
    },
    close() {
      this.p_value = false;
      this.$emit("input", this.p_value);
    },
  },
};
</script>

<style lang="scss"></style>
